<template>
  <div class="app-container">
    <el-table
      ref="multipleTable"
      :data="tableData"
      border
      class="table"
      header-cell-class-name="table-header"
    >
      <el-table-column prop="app_name" label="应用名称" width="100"/>
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="{row}">
          <el-tag v-if="row.status==0" size="small">未安装</el-tag>
          <el-tag v-if="row.status==1" size="small" type="success">运行中</el-tag>
          <el-tag v-if="row.status==2" size="small">安装中</el-tag>
          <el-tag v-if="row.status==3" size="small">停止</el-tag>
          <el-tag v-if="row.status==4" size="small">异常</el-tag>
          <el-tag v-if="row.status==5" size="small">安装完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="install_path" label="应用路径" />
      <el-table-column label="操作" width="200">
        <template slot-scope="{row}">
          <el-button v-if="row.status==0&&(row.app_name=='Nginx' ||
          row.app_name=='Redis' ||
          row.app_name=='Maven' ||
          row.app_name=='Java' ||
          row.app_name=='Hadoop' ||
          row.app_name=='Scala' ||
          row.app_name=='Kafka' ||
          row.app_name=='Spark')" type="primary" size="small" @click="installApp(row.id,row.app_name,row.instance_id)">安装</el-button>
          <el-button v-else-if="row.status==3||row.status==5" type="primary" size="small" @click="startApp(row.id)">启动</el-button>
          <template v-else-if="row.status==1">
            <el-button  type="info" size="small" @click="stopApp(row.id)">停止</el-button>
            <el-button  type="info" size="small" @click="reloadApp(row.id)">重启</el-button>
          </template>

          <el-button v-else size="small">暂不支持</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  data() {
    return {
      tableData: [],
      id: 0
    }
  },
  computed: {

  },
  created() {
    this.instance_id = this.$route.params.instance_id
    this.ecsAppList()
  },
  methods: {
    ecsAppList() {
      axios.get('/aliyunEcs/ecsAppList', {
        params: {
          instance_id: this.instance_id,
        }
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.tableData = response.data.data
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    installApp(id,appNmae,instanceId){
      let taskType = "";
      let taskRemark = "";
      if(appNmae == "Hadoop"){
        taskType = "install_hadoop";
        taskRemark = "安装hadoop";
      }
      if(appNmae == "Nginx"){
        taskType = "install_nginx";
        taskRemark = "安装nginx";
      }
      if(appNmae == "Redis"){
        taskType = "install_redis";
        taskRemark = "安装redis";
      }
      if(appNmae == "Maven"){
        taskType = "install_maven";
        taskRemark = "安装maven";
      }
      if(appNmae == "Java"){
        taskType = "install_java";
        taskRemark = "安装java";
      }
      if(appNmae == "Hadoop"){
        taskType = "install_hadoop";
        taskRemark = "安装hadoop";
      }
      if(appNmae == "Scala"){
        taskType = "install_scala";
        taskRemark = "安装scala";
      }
      if(appNmae == "Kafka"){
        taskType = "install_kafka";
        taskRemark = "安装kafka";
      }
      if(appNmae == "Spark"){
        taskType = "install_spark";
        taskRemark = "安装spark";
      }

      axios.get('/aliyunEcs/ecsAppInstallTask', {
        params: {
          id:id,
          appName:appNmae,
          taskType:taskType,
          instance_id: instanceId,
          taskRemark:taskRemark,
        }
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.$message({
              message: "任务创建成功",
              type: 'error'
            })
            this.ecsAppList()
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    startApp(id){
      axios.get('/aliyunEcs/startApp', {
        params: {
          id:id
        }
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.$message({
              message: "启动成功",
              type: 'success'
            })
            this.ecsAppList()
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    stopApp(id){
      axios.get('/aliyunEcs/stopApp', {
        params: {
          id:id
        }
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.$message({
              message: "停止成功",
              type: 'success'
            })
            this.ecsAppList()
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    reloadApp(id){
      axios.get('/aliyunEcs/reloadApp', {
        params: {
          id:id
        }
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.$message({
              message: "重启成功",
              type: 'success'
            })
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    }
  }
}
</script>

<style scoped>

</style>
